/** @jsxImportSource @emotion/react */
import * as React from "react";
import {css} from "@emotion/react";
import {
  CCell, Cell, Table, TableBody, TableRow, Text, TableHead, TextArea, BlobInputList, LineColumn, InputLine, TableFoot,
} from "customize-easy-ui-component";
import {InspectRecordLayout, InternalItemProps, RepLink, useItemInputControl} from "../../common/base";
import {TailMenRowIspCheck} from "../../contain/rarelyVary";
import {useMeasureInpFilter} from "../../common/hooks";
import {objNestSet} from "../../../common/tool";
import {useOmnipotentPrefCs, useOmnipotentPrefTitle} from "../../hook/useOmnipotentPref";

const items检验项 = [
     //存储名字 '资料审查' 重复的 报错。
  ['料审查', [], '资料审查' ],
  ['宏观检验', [], '宏观检验', ],
  ['壁厚测定', [], '壁厚测定',  ],
  ['强度校核', [], '强度校核', ],
  ['射线检测', [], '射线检测' ],
  ['超声检测', [], '超声检测', ],
  ['衍射时差', [], '衍射时差法超声检测' ],
  ['磁粉检测', [], '磁粉检测' ],
  ['渗透检测', [], '渗透检测' ],
  ['声发射', [], '声发射检测' ],
  ['光谱分析', [], '光谱分析' ],
  ['硬度检测', [], '硬度检测' ],
  ['金相分析', [], '金相分析' ],
  ['附件仪表', [], '安全附件及仪表检验' ],
  ['耐压试验', [], '耐压试验' ],
  ['气密性', [], '气密性试验' ],
  ['氨检漏', [], '氨检漏试验' ],
  ['卤素检漏', [], '氦、卤素检漏试验' ],
    //【注意】序号18=耦合！ : 固定数目【给用户增加项目】其它1 其他1: {"t":''}
  ['其它1', [], ' ' ],
  ['其它2', [], ' ' ],
];

export const itemA检验项: string[] = ['附页说明' ];
items检验项.forEach(([name, title, initIsp], i: number) => {
  itemA检验项.push(name as string);
});
const 检查结果选=['符合要求', '安全状况等级评为1级', '安全状况等级评为2级', '安全状况等级评为3级', '／'];
//似乎原本？？应该和 “目录” 项目列表合并集成一起的编辑器， #单独分出？ #这丫也好，更清晰点的编辑操作。
export const AppendixPage =
    React.forwardRef((
        {children, show, alone = true, refWidth, label, }: InternalItemProps, ref
    ) => {
      const {inp, setInp} = useItemInputControl({ref});
      const [getInpFilter] = useMeasureInpFilter(null, itemA检验项,);
        //其它1 2:需要动态的设置标题，同步显示？  config：动态的。
      const config =React.useMemo(()=>{
            items检验项[18][2]=inp?.其它1?.t;
            items检验项[19][2]=inp?.其它2?.t;
            return items检验项;
      },[inp?.其它1, inp?.其它2]);
      const titNode=useOmnipotentPrefTitle({config});
      return (
          <InspectRecordLayout inp={inp} setInp={setInp} getInpFilter={getInpFilter} show={show}
                               alone={alone} label={label!}>
            <Text variant="h5">{label}：</Text>
            {config.map(([name, _1, _2, unit]: any, i: number) => {
              return (<React.Fragment key={i}>
                <div css={{display: 'flex', flexWrap: 'wrap', alignItems: 'center'}}>
                  {titNode[i]}
                  <div css={{display: 'inline-flex', alignItems: 'center', flexWrap: 'wrap'}}>
                    检查结果：
                    <BlobInputList value={inp?.[name]?.r || ''} datalist={检查结果选} rows={1}
                                   style={{display: 'inline-flex', width: '14rem', maxWidth: '100%', fontSize: '1rem',}}
                                   listStyle={css({fontSize: '1rem',})}
                                   onListChange={v => objNestSet(name, 'r', v || undefined, inp, setInp)}/>
                  </div>
                  <div css={{display: 'inline-flex', alignItems: 'center', flexWrap: 'wrap'}}>
                    备注：
                    <BlobInputList value={inp?.[name]?.m || ''}  rows={2}
                                   style={{display: 'inline-flex', width: '16rem', maxWidth: '100%',}}
                                   onListChange={v => objNestSet(name, 'm', v || undefined, inp, setInp)}/>
                  </div>
                </div>
              </React.Fragment>);
            })}
            <Text variant="h5" css={{fontSize:'1.3rem',marginTop:'1rem'}}>最后2个项目附加的定义 {'>>'}</Text>
            <LineColumn>
              <InputLine label={`项目19名称：`}>
                <BlobInputList value={inp?.其它1?.t ||''} style={{display: 'inline-table', width: '7rem'}}  rows={2}
                               onListChange={v => objNestSet('其它1','t',v||undefined, inp, setInp) }/>
              </InputLine>
              <InputLine label={`项目20名称：`}>
                <BlobInputList value={inp?.其它2?.t ||''} style={{display: 'inline-table', width: '7rem'}}  rows={2}
                               onListChange={v => objNestSet('其它2','t',v||undefined, inp, setInp) }/>
              </InputLine>
            </LineColumn>
            <hr/>
            备注：
            <TextArea  value={inp?.附页说明 ||''} rows={6}
                       onChange={e => setInp({ ...inp, 附页说明: e.currentTarget.value||undefined}) } />
            {children}
          </InspectRecordLayout>
      );
  });

const tailRender = (orc: any, name: string, lix: number, unit: any) => {
  const nneedbig = orc?.[name]?.r?.length >= 3 || (!orc?.[name]?.r);
  return <>
    <CCell><Text css={{fontSize: nneedbig ? '0.875rem' : '1.15rem'}}>{orc?.[name]?.r ?? '／'}</Text></CCell>
    <CCell>{orc?.[name]?.m ?? '／'}</CCell>
  </>;
}
//检验报告附页；？=“目录”；  原版本 项目抬头有打勾的位置标记。 ？
export const AppendixPageVw = ({orc, rep}: { orc: any, rep: any }
) => {
  const configNew =React.useMemo(()=>{
        const mainp=items检验项.slice(0,18);
        let add=[];
        if(orc?.其它1?.t)  add.push( ['其它1', [], orc?.其它1?.t ] );
        if(orc?.其它2?.t)  add.push( ['其它2', [], orc?.其它2?.t ] );
        return [...mainp, ...add ];
  },[orc?.其它1, orc?.其它2]);
  const [renderP1,] = useOmnipotentPrefCs({orc, config: configNew,
                   tag:'ApxIspItms', tailRender, pcols: 1, noNo: false, unitCel: false});
  return <>
    <div css={{"@media print": {paddingBottom: '4.5rem', pageBreakInside: 'avoid'}}}>
      <Text id='AppendixPage' variant="h2" css={{textAlign: 'center', marginTop: '1rem',
      }}>球形储罐定期检验报告附页</Text>
      <div css={{display: 'flex', justifyContent: 'space-between'}}>
        <Text></Text>
        <Text>报告编号：{rep.isp.no}</Text>
      </div>
    </div>
    <Table fixed={ ["4%", "10%", "%",  "22%","30%"] }
              css={{borderCollapse: 'collapse', "@media print": {marginTop: '-4.5rem'}}} tight miniw={800}>
      <TableHead>
        <TableRow>
          <CCell><Text css={{fontSize: '0.75rem'}}>序号</Text></CCell><CCell colSpan={2}>检验项目</CCell><CCell>检查结果</CCell><CCell>说明</CCell>
        </TableRow>
      </TableHead>
      <TableBody>
        <RepLink rep={rep} tag={'AppendixPage'}>
          {renderP1}
          <TableRow>
            <Cell split={true} colSpan={5}>
              <div css={{minHeight: '2rem', whiteSpace: 'pre-wrap'}}>
                备注：<br/>{orc?.附页说明 || '／'}
              </div>
            </Cell>
          </TableRow>
        </RepLink>
      </TableBody>
    </Table>
    <TailMenRowIspCheck  orc={orc} rep={rep} href={`/report/${rep?.modeltype}/ver/${rep?.modelversion}/${rep?.id}/ProjectList#ProjectList`}>
    </TailMenRowIspCheck>
  </>;
};
